/*
 * @Author: your name
 * @Date: 2020-07-25 22:37:37
 * @LastEditTime: 2021-08-02 21:35:53
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ts\react-redux-app\src\todoList\todoList.js
 */
 import React, { Component } from 'react';
 import {changeAction} from '../store/demo_reducer.js'
 import {connect} from 'react-redux'
 class TodoList extends Component {
   constructor(props) {
     super(props);
     this.state = {}
    //  this.inputChange = this.inputChange.bind(this)
   }
   render() {
     return (
        <div >
            <div>
                <input
                  type="text" value={this.props.inputValue} onChange={this.props.inputChange}
                  ref={(inputdom)=>{this.inputdom = inputdom}}
                />
                <button onClick={()=>{console.log(this.inputdom)}}>提交</button>
            </div>
            todolist
        </div>
      );
   }
 }
 //将redux 中的数据与 state 进行影射
 const mapStateToProps = (state)=>{
   const text = state.DemoReducer.text
   return {
    inputValue:text
   }
 }

 const dispatchToProps = (dispatch)=>{
   return {
     inputChange(e){
        _inputChange(e,dispatch)
     }
    // inputChange:(e)=>{
    //   dispatch(changeAction(e.target.value))
    // }
   }
 }

 function _inputChange(e,dispatch){
  e.persist()

  console.log(e.target.value)
  console.log(dispatch)
  dispatch(changeAction(e.target.value))
 }


 export default connect(mapStateToProps, dispatchToProps)(TodoList)
